<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入BB的内容（最多120字）" maxlength="120" v-model="comText"></textarea>
        <mt-button type="primary" size="large" @click="addComments">提交</mt-button>
        <div class="cmt-list">
            <ul class="mui-table-view">
                <li v-for="item in comments" class="mui-table-view-cell mui-media">
                    <img class="mui-media-object mui-pull-left" src="/public/images/newslist/shuijiao.jpg">
                    <div class="mui-media-body">
                        <span class="user">{{item.user_name}}</span>
                        <span class="fl-right">{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
                        <p class='white-space'>{{item.content}}</p>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <img class="mui-media-object mui-pull-left" src="/public/images/newslist/muwu.jpg">
                    <div class="mui-media-body">
                        <span class="user">标题</span>
                        <span class="fl-right">2020-01-12</span>
                        <p class='white-space'>测试评论内容测试评论内容测试评论内容测试评论内容测试评论内容</p>
                    </div>
                </li>
            </ul>
        </div>
        <mt-button type="danger" plain size="large" v-if="moreBtn" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import connector from '../base/interface.js';
    import { Toast } from 'mint-ui';
    export default {
        data(){
            return{
                /*默认展示第一页评论数据*/
                page:1,
                /*所有的评论数据*/
                comments:[],
                /*发表评论内容*/
                comText:'',
                /*控制加载更多按钮显示*/
                moreBtn:true
            }
        }, methods:{
            getComments(){
                connector.getComments(this.id,this.page).then(result=>{
                    /*每当获取新数据时需要拼接,..不可覆盖*/
                    if(!result.length){
                        this.moreBtn=false;
                    }
                    this.comments.push(...result);
                },err=>{
                    Toast("获取评论数据失败");
                    console.log(err);
                });
            }, getMore(){
                /*加载更多评论*/
                this.page++;
                this.getComments();
            },addComments(){
                /*发表评论*/
                if(this.comText.trim().length == 0){
                    return Toast("评论数据不能为空");
                }
                connector.addComment({id:this.id,content:this.comText.trim()}).then(result=>{
                    var newcmt={user_name:'匿名用户',add_time:Date.now(),content:this.comText.trim()};
                    this.comments.unshift(newcmt);
                    this.comText="";
                },err=>{
                    Toast("添加失败");
                    console.log(err.message);
                })
            }

        },props:["id"],
        created() {
            this.getComments();
        }
    }
</script>

<style lang="scss" scoped>
.white-space{
    white-space: normal;
}
.cmt-list{
    margin: 10px 0;
    span[class=fl-right]{
        color: #8f8f94;
        font-size: 14px;
    }
    span[class=user]{
        font-weight: bold;
        color: black;
    }
}
</style>